<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员中心-分类管理</title>
    <script src="../js/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <script src="../js/jquery-3.1.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/jquery.cookie.js"></script>
</head>
<body>
<div class="row">
    <div id="classifyApp">
        <div class="center-block">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="col-lg-1">
                        <ul class="list-group" id="mySelect">
                            <li class="list-group-item " style="background-color: white"><a
                                    style="text-decoration: none;color: black" href="administrator.html">用户管理</a></li>
                            <li class="list-group-item " style="background-color: white"><a
                                    style="text-decoration: none;color: black" href="administrator_goods.html">商品管理</a></li>
                            <li class="list-group-item " style="background-color: #E83737">分类管理</li>
                            <li class="list-group-item" style="background-color: white"><a
                                    style="text-decoration: none;color: black" href="">订单管理</a></li>
                            <li class="list-group-item " style="background-color: white"><a
                                    style="text-decoration: none;color: black" href="administrator_store.html">店铺管理</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-4">
                        <table class="table table-hover">
                            <tr>
                                <th>一级目录名</th>
                                <th>查看二级目录</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="item in level1">
                                <td>{{item.name}}</td>
                                <td>
                                    <button class="btn btn-primary" type="button" data-toggle="collapse"
                                            data-target="#secondLevel"
                                            aria-expanded="false" aria-controls="collapseExample"
                                            @click="initClassificationLevelTwo(item.id)">查看
                                    </button>
                                </td>
                                <td>
                                    <button class="btn btn-success">添加</button>
                                    <button class="btn btn-info">编辑</button>
                                    <button class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-lg-7">
                        <div class="collapse" id="secondLevel">
                            <div class="col-lg-6">
                                <table class="table table-hover">
                                    <tr>
                                        <th>二级目录名</th>
                                        <th>查看三级目录</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-for="item in level2">
                                        <td>{{item.name}}</td>
                                        <td>
                                            <button class="btn btn-primary" type="button" data-toggle="collapse"
                                                    data-target="#ThirdLevel"
                                                    aria-expanded="false" aria-controls="collapseExample"
                                                    @click="initClassificationLevelThree(item.id)">查看
                                            </button>
                                        </td>
                                        <td>
                                            <button class="btn btn-success">添加</button>
                                            <button class="btn btn-info">编辑</button>
                                            <button class="btn btn-danger">删除</button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-lg-6">
                                <div class="collapse" id="ThirdLevel">
                                    <table class="table table-hover">
                                        <tr>
                                            <th>三级级目录名</th>
                                            <th>操作</th>
                                        </tr>
                                        <tr v-for="item in level3">
                                            <td>{{item.name}}</td>
                                            <td>
                                                <button class="btn btn-success">添加</button>
                                                <button class="btn btn-info">编辑</button>
                                                <button class="btn btn-danger">删除</button>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#classifyApp",
        data: {
            level1: [],
            level2: [],
            level3: []
        },
        mounted: function () {
            this.initClassificationLevelOne(0);
        },
        methods: {
            initClassificationLevelOne: function (parent) {
                let _this = this;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/LevelController/getLevels",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        parent: parent
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.level1 = result.data.levelList;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            initClassificationLevelTwo: function (parent) {
                let _this = this;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/LevelController/getLevels",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        parent: parent
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.level2 = result.data.levelList;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            initClassificationLevelThree: function (parent) {
                let _this = this;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/LevelController/getLevels",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        parent: parent
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.level3 = result.data.levelList;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            logout: function () {
                /**
                 * 注销，清空所有cookie(或者只清空保存着token的Cookie就行)
                 */
                let keys = document.cookie.match(/[^ =;]+(?=\=)/g);
                if (keys) {
                    for (let i = keys.length; i--;)
                        document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
                }
                //返回登录页面或者主页
                window.location.href = "login.html";
            }
        }
    })
</script>
</body>
</html>